<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>04过滤computed</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <h2>人员列表</h2>
        <input type="text" v-model="keyup">
        <ul>
            <li v-for='p in persons2':key='p.id'>
            {{p.name}}-{{p.age}}-{{p.gender}}
        </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            data: {
                keyup:'',
                persons:[
					{id:'001',name:'马冬梅',age:19,gender:'女'},
					{id:'002',name:'周冬雨',age:20,gender:'女'},
					{id:'003',name:'周杰伦',age:21,gender:'男'},
					{id:'004',name:'帅邓伦',age:22,gender:'男'},
				]
            },
            methods: {},
            computed: {
                persons2(){
                    return this.persons.filter(person => person.name.indexOf(this.keyup)!==-1)
                }
            },
            watch: {}
        })
    </script>
</body>

</html>